<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <style>
        .layui-table-page{text-align: center;}
    </style>
</head>
<body>
    <!-- 多条件查询 -->
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="username_search" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="name_search" placeholder="姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">状态</label>
                <div class="layui-input-inline">
                  <select id="status_search" lay-verify="required">
                    <option value="-1">请选择状态</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </div>
              </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">查询</button>
            </div>
        </div>
    </form>

    <table id="userlist" lay-filter="userlist">
    </table>

    <!-- 修改弹出层 -->
    <div id="modifyLayer" style="display: none; margin-top: 30px;margin-right: 40px; width: 400px;">
        <form class="layui-form" id="modifyForm" lay-filter="formModify">
            <div class="layui-form-item">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                  <input type="text" name="id" id="id" required lay-verify="required" placeholder="请输入编号" class="layui-input" readonly>
                </div>
              </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" required lay-verify="required" placeholder="请输入用户名"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入姓名"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" id="age" required lay-verify="required" placeholder="请输入年龄"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="modify" type="button"
                        style="width: 180px;">修&nbsp;&nbsp;&nbsp;&nbsp;改</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        layui.use(['layer', 'laypage', 'form', 'table'], function () {
            var layer = layui.layer
            var laypage = layui.laypage;
            var $ = layui.jquery
            var form = layui.form
            var table = layui.table;

            form.render();

            table.render({
                elem: '#userlist'
                // ,height: 312
                ,url: '${pageContext.request.contextPath}/findByCondition.user' //数据接口
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,10,30,50]
                ,cols: [[ //表头
                    {field: 'id', title: '序号', sort: true,align:'center', fixed: 'left',type: "numbers", width:80}
                    ,{field: 'username', title: '用户名',align:'center'}
                    ,{field: 'name', title: '姓名',align:'center'}
                    ,{field: 'age', title: '年龄',align:'center'}
                    ,{field: 'status', title: '状态',align:'center',templet: function(data){
                            var str;
                            if(data.status == 1){
                                str = '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-switch lay-filter="status" value="'+data.id+'" checked>'
                            }else {
                                str = '<input type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-switch lay-filter="status" value="'+data.id+'">'
                            }
                            return str
                    }}
                    ,{field: 'registDate', title: '注册时间',align:'center'}
                    ,{field: 'id', title: '操作',align:'center',templet: function(data){
                            var str = `
                                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="doModify(`+data.id+`)">编辑</button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="doDelete(`+data.id+`)">删除</button>
                            `;
                            return str
                        }}
                ]]
            });

            // 监听开关switch被点击
            form.on('switch(status)', function(data){
                // console.log(data.elem.checked); //开关是否开启，true或者false
                // console.log(data.value); //开关value值
                $.ajax({
                    url:'${pageContext.request.contextPath}/modifyStatus.user',
                    data:{
                        id:data.value,
                        status:data.elem.checked ? 1 : 0
                    },
                    dataType:'json',
                    success:function (res) {
                        if(res.code==0){
                            layer.msg('状态更新成功',{icon:1})
                        }
                    }
                })
            });  
    

        });

        /**
         * 删除
         */
        function doDelete(id) {
            layui.use('layer', function () {
                var layer = layui.layer
                var $ = layui.jquery
                layer.confirm('确定要删除吗', { icon: 3, title: '提示信息' }, function (index) {
                    $.ajax({
                        type:'get',
                        url:'${pageContext.request.contextPath}/removeById.user',
                        data:{id},
                        dataType:'json',
                        success:function (res) {
                            if(res.code == 0){
                                layer.close(index)
                                // doSearch();
                                location.href = '${pageContext.request.contextPath}/toList.user'
                            }
                        }
                    })
                });
            })
        }

        /**
         * 修改
         */
        function doModify(id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer
                var $ = layui.jquery
                var form = layui.form

                // 获取指定用户的信息
                $.ajax({
                    url:'${pageContext.request.contextPath}/findById.user',
                    data:{id},
                    dataType:'json',
                    success:function(res){
                        console.log(res)
                        if(res.code == 0){
                            // 方式1：逐个赋值
                            // $('#id').val(res.data.id)
                            // $('#username').val(res.data.username)
                            // $('#password').val(res.data.password)
                            // $('#name').val(res.data.name)
                            // $('#age').val(res.data.age)
                            // 方式2：使用layui提供的表单赋值
                            form.val('formModify',res.data)

                            layer.open({
                                type: 1,
                                title: '修改管理员信息',
                                content: $('#modifyLayer'),
                            })
                        }
                    }
                })

                // 监听修改事件
                form.on('submit(modify)',function(data){
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/modify.user',
                        data:data.field,
                        dataType:'json',
                        success:function (res) {
                            if(res.code == 0){
                                $('#modifyForm')[0].reset(); // 清空表单
                                layer.closeAll()
                                doSearch();
                            }else{
                                layer.msg(res.msg,{icon:2})
                            }
                        }
                    })
                })
            })
        }

        /**
         * 按条件搜索
         */
        function doSearch(){
            layui.use(['table'], function () {
                var table = layui.table;
                var $ = layui.jquery

                table.reload('userlist', {
                    url: '${pageContext.request.contextPath}/findByCondition.user'
                    , where: {
                        username:$('#username_search').val(),
                        name:$('#name_search').val(),
                        status:$('#status_search').val()
                    } //设定异步数据接口的额外参数
                });
            })
        }
    </script>
</body>
</html>